<!--
<meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Adding a dynamic "Back To Top" floating button with smooth scroll</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
-->
	<style>
		div#page {
			max-width: 900px;
			margin-left: auto;
			margin-right: auto;
			padding: 20px;
		}
		
		.back-to-top {
			position: fixed;
			bottom: 2em;
			right: 0px;
			text-decoration: none;
			color: #000000;
			/*background-color: rgba(235, 235, 235, 0.80);*/
			background-color: rgba(255, 255, 109, 0.8);
			font-size: 12px;
			padding: 1em;
			display: none;
			border: 1px solid #888;
		}

		.back-to-top:hover {	
			background-color: rgba(135, 135, 135, 0.50);
		}	
	</style>

<a href="#" class="back-to-top">Back to Top</a>

<script>            
			jQuery(document).ready(function() {
				var offset = 220;
				var duration = 500;
				jQuery(window).scroll(function() {
					if (jQuery(this).scrollTop() > offset) {
						jQuery('.back-to-top').fadeIn(duration);
					} else {
						jQuery('.back-to-top').fadeOut(duration);
					}
				});
				
				jQuery('.back-to-top').click(function(event) {
					event.preventDefault();
					jQuery('html, body').animate({scrollTop: 0}, duration);
					return false;
				})
			});
		</script>


<div class="cleaner_h60"></div>
<div class="cleaner_h50"></div>
<div id="footermainPan">
  <div id="footerPan">
  <marquee><span style="color:#fff">&#169; 2014 | AKADEMI METEOROLOGI DAN GEOFISIKA - AMG</span> | All Rights Reserved.</marquee>
  </div>
</div>
</body>
</html>
